<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">
	姓：<input type="text" placeholder="First Name" v-model="firstName"><br>
	名：<input type="text" placeholder="Last Name" v-model="lastName"><br>
	<!--fullName1是根据fistName和lastName计算产生-->
	姓名1(单向)：<input type="text" placeholder="Full Name1" v-model="fullName1"><br>
	姓名2(单向)：<input type="text" placeholder="Full Name2" v-model="fullName2"><br>
	姓名3(双向)：<input type="text" placeholder="Full Name3" v-model="fullName3"><br>
	<p>{{fullName1}}</p>
	<p>{{fullName3}}</p>
	<p>{{fullName3}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
	const vm = new Vue({
		el: '#demo',
		data: {
			firstName: 'A',
			lastName: 'B',
			fullName2: 'A B'
		},
		// 计算属性配置: 值为对象
		computed: {
			fullName1(){// 属性的get()
				console.log('fullName1()',this);
				return this.firstName + " " + this.lastName;
			},
			fullName3: {
				// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
				get(){
					console.log('fullName3');
                   return this.firstName + " " + this.lastName;
				},
				 // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
				set(val){// fullName3的最新value值  A-B23
                   const names = val.split(" ")
                   // 更新firstName和lastName
                   this.firstName = names[0];
                   this.lastName = names[1];
				}
			}
		},
		watch: {
			// 配置监视firstName
			firstName: function(newVal,oldVal){// 相当于属性的set
				// 更新fullName2
				this.fullName2 = newVal + " " + this.lastName; 
			}
		}
	})
	 // 监视lastName
	vm.$watch('lastName',function(newVal,oldVal){
		// 更新fullName2
		this.fullName2 = this.firstName + " " + newVal; 
	})
</script>
</body>
</html>